---
title: Tooltip
description: Displays an 8-bit tooltip component.
---

import { Button } from "@/components/ui/8bit/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/8bit/tooltip";
import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";
import ComponentPreview from "@/components/component-preview";

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/tooltip"
    command="pnpm dlx shadcn@latest add @8bitcn/tooltip"
  />
</div>

<ComponentPreview title="8-bit Tooltip component" name="tooltip">
  <TooltipProvider>
    <Tooltip delayDuration={500}>
      <TooltipTrigger>
        <Button variant="outline">Hover</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</ComponentPreview>

## Installation

---

<InstallationCommands packageName="tooltip" />

## Usage

---

```tsx
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/8bit/tooltip"
```

```tsx
<TooltipProvider>
  <Tooltip delayDuration={500}>
    <TooltipTrigger>
      <Button variant="outline">Hover</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>
```

